<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>账单实收实付款记录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="pageContentWhole">
      <a-row :gutter="[16]">
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="结算对象">
              <a-input v-model="searchForm.custName"></a-input>
            </a-form-item>
            <a-form-item label="对账单编号">
              <a-input v-model="searchForm.billCode"></a-input>
            </a-form-item>
            <a-form-item label="收付类型">
              <a-select v-model="searchForm.feeType" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option :key="1">实收</a-select-option>
                <a-select-option :key="2">实付</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="录入人">
              <a-input v-model="searchForm.operatorName"></a-input>
            </a-form-item>
            <a-form-item label="收/付款银行">
              <a-input v-model="searchForm.transactionBank"></a-input>
            </a-form-item>
            <a-form-item label="收/付款账号">
              <a-input v-model="searchForm.transactionAccount"></a-input>
            </a-form-item>
            <a-form-item label="日期">
              <a-range-picker @change="onChange"><a-icon slot="suffixIcon" type="calendar" /></a-range-picker>
            </a-form-item>
            <a-form-item label="币种">
              <a-select v-model="searchForm.currencyType" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option key="CNY">人民币</a-select-option>
                <a-select-option key="USD">美元</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="结算主体">
              <a-select v-model="searchForm.businessType" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option :key="1">江苏佳华物流发展有限公司</a-select-option>
                <a-select-option :key="2">江苏佳特物流有限公司</a-select-option>
                <a-select-option :key="3">徐州佳创国际物流有限公司</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-item>
          </a-form>

          <a-card style="text-align:center; margin-top:24px;">
            <a-col span="6" class="assent" style="margin: 5px 0;">
              <div class="assent_mes">实收人民币（元）</div>
              <div class="assent_shu">{{statistics.amountCNYReceiv||'0'}}</div>
            </a-col>
            <a-col span="6" class="assent" style="margin: 5px 0;">
              <div class="assent_mes">实付人民币（元）</div>
              <div class="assent_shu">{{statistics.amountCNYPay||'0'}}</div>
            </a-col>
            <a-col span="6" class="assent" style="margin: 5px 0;">
              <div class="assent_mes">实收美元（USD）</div>
              <div class="assent_shu">{{statistics.amountUSDReceiv||'0'}}</div>
            </a-col>
            <a-col span="6"  style="margin: 5px 0;">
              <div class="assent_mes">实付美元（USD）</div>
              <div class="assent_shu">{{statistics.amountUSDPay||'0'}}</div>
            </a-col>
          </a-card>

          <a-table :columns="columns" :data-source="tableData" :loading="loading" class="tableMargin" :pagination="pagination"
            :scroll="{ x: 1800 }"
            rowKey="id">
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="billCode" slot-scope="text, record"><a type="link" @click="openUrl(record)">{{text}}</a></template>
            <template slot="operation" slot-scope="text, record">
                <a v-if="record.bankVoucher" @click="viewIt(record.bankVoucher)">查看凭证</a>
                <span v-if="!record.bankVoucher">暂无凭证</span>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <!-- 查看图片 -->
    <preview-img-modal v-if="previewImage" :src="previewImage" @clear-src="clearSrc"/>
  </div>
</template>

<script>
import {commonExport} from '@/api/request'
import {queryBillReceivablePayable} from '@/api/financialCenter'

export default {
  data () {
    const columns = [
      {
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      },
      {
        title: '对账单编号',
        dataIndex: 'billCode',
        scopedSlots: {customRender: 'billCode'}
      },
      {
        title: '收付类型',
        dataIndex: 'feeTypeName'
      },
      {
        title: '结算主体',
        dataIndex: 'businessTypeName'
      },
      {
        title: '结算对象',
        dataIndex: 'custName',
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '金额（元）',
        dataIndex: 'amountStr',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY' || !text) return text || '--'
          else if (text && record.currencyType === 'USD') return <span class="t_money_small">{text}</span>
        }
      },
      {
        title: '付款账号',
        dataIndex: 'transactionAccount',
        customRender: (text, row, index) => {
          // 应收
          if (row.transactionAccount && row.feeType === '1') return row.transactionAccount
          else if (row.account && row.feeType === '2') return row.account
          else return '--'
        }
      },
      {
        title: '付款银行',
        dataIndex: 'transactionBank',
        customRender: (text, row, index) => {
          // 应收
          if (row.transactionBank && row.feeType === '1') return row.transactionBank
          else if (row.bank && row.feeType === '2') return row.bank
          else return '--'
        }
      },
      {
        title: '收款账号',
        dataIndex: 'account',
        customRender: (text, row, index) => {
          // 应付
          if (row.transactionAccount && row.feeType === '2') return row.transactionAccount
          else if (row.account && row.feeType === '1') return row.account
          else return '--'
        }
      },
      {
        title: '收款银行',
        dataIndex: 'bank',
        customRender: (text, row, index) => {
          // 应付
          if (row.transactionBank && row.feeType === '2') return row.transactionBank
          else if (row.bank && row.feeType === '1') return row.bank
          else return '--'
        }
      },
      {
        title: '日期',
        dataIndex: 'transactionDate'
      },
      {
        title: '录入人',
        dataIndex: 'operatorName'
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 140,
        ellipsis: true,
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '操作',
        width: 120,
        fixed: 'right',
        scopedSlots: {customRender: 'operation'}
      }
    ]

    return {
      searchForm: {
        custName: '', // 结算对象
        billCode: '', // 对账单编号
        feeType: '', // 收付类型 1 应收 2应付
        operatorName: '', // 录入人
        transactionBank: '', // 收/付款银行
        transactionAccount: '', // 收/付款账号
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        currencyType: '', // 币种 CNY,USD
        businessType: '' // 结算主体 1佳华 2佳特 3佳创
      },
      columns,
      tableData: [],
      statistics: {},
      loading: false,
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      previewImage: null
    }
  },
  methods: {
    onChange (data, dateString) {
      this.searchForm.startDate = dateString[0]
      this.searchForm.endDate = dateString[1]
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryBillReceivablePayable({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.billReceivPayList.list
        this.statistics = {
          amountCNYPay: rsp.data.amountCNYPay,
          amountCNYReceiv: rsp.data.amountCNYReceiv,
          amountUSDPay: rsp.data.amountUSDPay,
          amountUSDReceiv: rsp.data.amountUSDReceiv
        }
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.billReceivPayList.pageSize,
          total: rsp.data.billReceivPayList.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.billReceivPayList.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    excelExport () {
      commonExport('/bill/exportBillReceivablePayable', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: [...this.columns, {
          title: '币种',
          dataIndex: 'currencyType'
        }]
      })
    },
    viewIt (bankVoucher) {
      this.previewImage = bankVoucher
    },
    clearSrc () {
      this.previewImage = null
    },
    openUrl (data) {
      // JIA_HUA_ORDER(“佳华订单”) JIA_HUA_CONTAINER(“佳华集装箱”) JIA_HUA_SHIP_VOYAGE(“佳华船舶航次”) JIA_TE(“佳特”) JIA_CHUANG(“佳创”)
      let url = ''
      if (data.feeType === '1') { // 应收
        if (data.businessType === '1') { // 1佳华 2佳特 3佳创
          if (data.business === 'JIA_HUA_ORDER') {
            url = `/financialCenter/receivableBillOfHuaJzx/${data.id}?status=${data.status}`
          } else if (data.business === 'JIA_HUA_CONTAINER') {
            url = `/financialCenter/receivableBillOfHuaXg/${data.id}?status=${data.status}`
          } else if (data.business === 'JIA_HUA_SHIP_VOYAGE') {
            url = `/financialCenter/receivableBillOfHuaCb/${data.id}?status=${data.status}`
          }
        } else if (data.businessType === '2') {
          url = `/financialCenter/receivableBillOfTe/${data.id}?status=${data.status}`
        } else if (data.businessType === '3') {
          url = `/financialCenter/receivableBillOfChuang/${data.id}?status=${data.status}`
        }
      } else if (data.feeType === '2') { // 应付
        if (data.businessType === '1') {
          if (data.business === 'JIA_HUA_ORDER') {
            url = `/financialCenter/payableBillOfHuaJzx/${data.id}?status=${data.status}`
          } else if (data.business === 'JIA_HUA_CONTAINER') {
            url = `/financialCenter/payableBillOfHuaXg/${data.id}?status=${data.status}`
          } else if (data.business === 'JIA_HUA_SHIP_VOYAGE') {
            url = `/financialCenter/payableBillOfHuaCb/${data.id}?status=${data.status}`
          }
        } else if (data.businessType === '2') {
          url = `/financialCenter/payableBillOfTe/${data.id}?status=${data.status}`
        } else if (data.businessType === '3') {
          url = `/financialCenter/payableBillOfChuang/${data.id}?status=${data.status}`
        }
      }
      window.open(url, '_blank')
    },
    handleCancel () {
      this.visible = false
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>

<style lang="less" scoped>
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 25px;

    .border {
      padding: 24px;
      border-top: 1px solid #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
    }

    .leftPosition {
      height: 305px;
      line-height: 305px;
      border-right: 1px solid #f0f0f0;
    }
  }

  .t_money_small {
    color: rgb(250, 173, 20);
    line-height: 21px;
  }
</style>
